<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>注册</title>
	<!-- bootstrap样式，地图插件使用 -->
	<link rel="stylesheet" href="../../css/bootstrap.min.css" />
	<link rel="stylesheet" href="../../layui/css/layui.css">
	<!-- 样式 -->
	<link rel="stylesheet" href="../../css/style.css" />
	<!-- 主题（主要颜色设置） -->
	<link rel="stylesheet" href="../../css/theme.css" />
	<!-- 通用的css -->
	<link rel="stylesheet" href="../../css/common.css" />
</head>
<style>
	html::after {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		content: '';
		display: block;
		background-attachment: fixed;
		background-size: cover;
		background-position: center;
		z-index: -1;
	}

	#swiper {
		overflow: hidden;
		margin: 0 auto;
	}

	#swiper .layui-carousel-ind li {
		width: 16px;
		height: 4px;
		border-width: 0;
		border-style: solid;
		border-color: rgba(0, 0, 0, .3);
		border-radius: 0px;
		background-color: rgba(255, 255, 255, 1);
		box-shadow: 0 0 0px rgba(255, 0, 0, .8);
	}

	#swiper .layui-carousel-ind li.layui-this {
		width: 16px;
		height: 4px;
		border-width: 0;
		border-style: solid;
		border-color: rgba(0, 0, 0, .3);
		border-radius: 0px;
		background-color: rgba(0, 85, 119, 1);
		box-shadow: 0 0 0px rgba(0, 85, 119, 1);
	}

	button,
	button:focus {
		outline: none;
	}

	.data-add-container .add .layui-select-title .layui-unselect {
		padding: 0 12px;
		height: 50px;
		font-size: 16px;
		color: #333;
		border-radius: 4px;
		border-width: 1px;
		border-style: solid;
		border-color: rgba(107, 104, 130, 1);
		background-color: #fff;
		box-shadow: 0 0 0px rgba(255, 0, 0, .8);
		text-align: left;
	}

	.data-add-container .add .layui-form-item {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.data-add-container .layui-form-pane .layui-form-item[pane] .layui-form-label {
		margin: 0;
		position: inherit;
		background: transparent;
		border: 0;
	}

	.data-add-container .add .layui-input-block {
		margin: 0;
		flex: 1;
	}

	.data-add-container .layui-form-pane .layui-form-item[pane] .layui-input-inline {
		margin: 0;
		flex: 1;
		display: flex;
	}
</style>

<body style="background: #EEEEEE; ">


	<div id="app">

		<!--
			<div class="layui-carousel" id="swiper">
				<div carousel-item id="swiper-item">
					<div v-for="(item,index) in swiperList" v-bind:key="index">
						<img class="swiper-item" :src="item.img">
					</div>
				</div>
			</div> -->
		<div class="layui-carousel" id="swiper"
			:style='{"boxShadow":"0 0px 0px #fff143","margin":"0 ","borderColor":"rgba(0,0,0,.3)","borderRadius":"0px","borderWidth":"0","width":"100%","borderStyle":"solid"}'>
			<div carousel-item id="swiper-item">
				<div v-for="(item,index) in swiperList" :key="index">
					<img style="width: 100%;height: 100%;object-fit:cover;" :src="item.img" />
				</div>
			</div>
		</div>
		<!-- 轮播图 -->

		<div class="data-add-container"
			:style='{"padding":"20px","boxShadow":"0px 0px 0px rgba(255,0,0,.8)","margin":"50px auto","borderColor":"rgba(255, 0, 0, 0)","backgroundColor":"#fff","borderRadius":"10px","borderWidth":"0","borderStyle":"solid"}'>

			<form class="layui-form layui-form-pane add" lay-filter="myForm">

				<div :style='{"padding":"10px","boxShadow":"0 0 0px #1685a9","margin":"0 0 10px 0","borderColor":"rgba(22, 133, 169, 1)","backgroundColor":"#fff","borderRadius":"0px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
					class="layui-form-item" pane>
					<label
						:style='{"width":"110px","padding":"0 12px 0 0","fontSize":"16px","color":"rgba(107, 104, 130, 1)","textAlign":"left"}'
						class="layui-form-label">电桩编号：</label>
					<div class="layui-input-block">
						<input
							:style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(255,0,0,.8)","borderColor":"rgba(107, 104, 130, 1)","backgroundColor":"#fff","color":"#333","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"16px","borderStyle":"solid","height":"50px"}'
							v-model="detail.dianzhuangbianhao" type="text" :readonly="ro.dianzhuangbianhao"
							name="dianzhuangbianhao" id="dianzhuangbianhao" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div :style='{"padding":"10px","boxShadow":"0 0 0px #1685a9","margin":"0 0 10px 0","borderColor":"rgba(22, 133, 169, 1)","backgroundColor":"#fff","borderRadius":"0px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
					class="layui-form-item" pane>
					<label
						:style='{"width":"110px","padding":"0 12px 0 0","fontSize":"16px","color":"rgba(107, 104, 130, 1)","textAlign":"left"}'
						class="layui-form-label">电桩类别：</label>
					<div class="layui-input-block">
						<select name="dianzhuangleibie" id="dianzhuangleibie" lay-filter="dianzhuangleibie">
							<option value="">请选择</option>
							<option v-for="(item,index) in dianzhuangleibie" v-bind:key="index" :value="item">{{item}}
							</option>
						</select>
					</div>
				</div>
				<div :style='{"padding":"10px","boxShadow":"0 0 0px #1685a9","margin":"0 0 10px 0","borderColor":"rgba(22, 133, 169, 1)","backgroundColor":"#fff","borderRadius":"0px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
					class="layui-form-item" pane>
					<label
						:style='{"width":"110px","padding":"0 12px 0 0","fontSize":"16px","color":"rgba(107, 104, 130, 1)","textAlign":"left"}'
						class="layui-form-label">图片：</label>
					<div class="layui-input-block">
						<div v-if="detail.tupian" style="display:inline-block;margin-right:10px;">
							<img id="tupianImg"
								style="width: 100px;height: 100px;border-radius: 50%;border: 2px solid #EEEEEE;"
								:src="baseurl+detail.tupian">
							<input type="hidden" :value="detail.tupian" id="tupian" name="tupian" />
						</div>
						<button v-if="!ro.tupian"
							:style='{"padding":"0 10px","boxShadow":"3px 3px 0px  #e0eee8","margin":"0 10px 0 0","borderColor":"#ccc","backgroundColor":"rgba(164, 226, 198, 1)","color":"rgba(157, 41, 51, 1)","borderRadius":"6px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"44px"}'
							type="button" class="layui-btn btn-theme" id="tupianUpload">
							<i v-if="true" :style='{"color":"rgba(157, 41, 51, 1)","show":true,"fontSize":"14px"}'
								class="layui-icon">&#xe67c;</i>上传图片
						</button>
					</div>
				</div>
				<div :style='{"padding":"10px","boxShadow":"0 0 0px #1685a9","margin":"0 0 10px 0","borderColor":"rgba(22, 133, 169, 1)","backgroundColor":"#fff","borderRadius":"0px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
					class="layui-form-item" pane>
					<label
						:style='{"width":"110px","padding":"0 12px 0 0","fontSize":"16px","color":"rgba(107, 104, 130, 1)","textAlign":"left"}'
						class="layui-form-label">输入电压：</label>
					<div class="layui-input-block">
						<input
							:style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(255,0,0,.8)","borderColor":"rgba(107, 104, 130, 1)","backgroundColor":"#fff","color":"#333","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"16px","borderStyle":"solid","height":"50px"}'
							v-model="detail.shurudianya" type="text" :readonly="ro.shurudianya" name="shurudianya"
							id="shurudianya" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div :style='{"padding":"10px","boxShadow":"0 0 0px #1685a9","margin":"0 0 10px 0","borderColor":"rgba(22, 133, 169, 1)","backgroundColor":"#fff","borderRadius":"0px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
					class="layui-form-item" pane>
					<label
						:style='{"width":"110px","padding":"0 12px 0 0","fontSize":"16px","color":"rgba(107, 104, 130, 1)","textAlign":"left"}'
						class="layui-form-label">输出功率：</label>
					<div class="layui-input-block">
						<input
							:style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(255,0,0,.8)","borderColor":"rgba(107, 104, 130, 1)","backgroundColor":"#fff","color":"#333","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"16px","borderStyle":"solid","height":"50px"}'
							v-model="detail.shuchugonglv" type="text" :readonly="ro.shuchugonglv" name="shuchugonglv"
							id="shuchugonglv" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div :style='{"padding":"10px","boxShadow":"0 0 0px #1685a9","margin":"0 0 10px 0","borderColor":"rgba(22, 133, 169, 1)","backgroundColor":"#fff","borderRadius":"0px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
					class="layui-form-item" pane>
					<label
						:style='{"width":"110px","padding":"0 12px 0 0","fontSize":"16px","color":"rgba(107, 104, 130, 1)","textAlign":"left"}'
						class="layui-form-label">所处位置：</label>
					<div class="layui-input-block">
						<input
							:style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(255,0,0,.8)","borderColor":"rgba(107, 104, 130, 1)","backgroundColor":"#fff","color":"#333","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"16px","borderStyle":"solid","height":"50px"}'
							v-model="detail.suochuweizhi" type="text" :readonly="ro.suochuweizhi" name="suochuweizhi"
							id="suochuweizhi" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div :style='{"padding":"10px","boxShadow":"0 0 0px #1685a9","margin":"0 0 10px 0","borderColor":"rgba(22, 133, 169, 1)","backgroundColor":"#fff","borderRadius":"0px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
					class="layui-form-item" pane>
					<label
						:style='{"width":"110px","padding":"0 12px 0 0","fontSize":"16px","color":"rgba(107, 104, 130, 1)","textAlign":"left"}'
						class="layui-form-label">每时单价：</label>
					<div class="layui-input-block">
						<input
							:style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(255,0,0,.8)","borderColor":"rgba(107, 104, 130, 1)","backgroundColor":"#fff","color":"#333","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"16px","borderStyle":"solid","height":"50px"}'
							v-model="detail.meishidanjia" type="text" :readonly="ro.meishidanjia" name="meishidanjia"
							id="meishidanjia" autocomplete="off" class="layui-input">
					</div>
				</div>

				<div :style='{"padding":"10px","boxShadow":"0 0 0px #1685a9","margin":"0 0 10px 0","borderColor":"rgba(22, 133, 169, 1)","backgroundColor":"#fff","borderRadius":"0px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
					class="layui-form-item" pane>
					<label
						:style='{"width":"110px","padding":"0 12px 0 0","fontSize":"16px","color":"rgba(107, 104, 130, 1)","textAlign":"left"}'
						class="layui-form-label">注意事项：</label>
					<div class="layui-input-block">
						<textarea name="zhuyishixiang" id="zhuyishixiang">请输入注意事项</textarea>
					</div>
				</div>

				<div :style='{"padding":"10px","boxShadow":"0 0 0px #1685a9","margin":"0 0 10px 0","borderColor":"rgba(22, 133, 169, 1)","backgroundColor":"#fff","borderRadius":"0px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
					class="layui-form-item">
					<div class="layui-input-block" style="text-align: right;">
						<button
							:style='{"padding":"0 10px","boxShadow":"8px 6px 6px #a1afc9","margin":"0 10px","borderColor":"#ccc","backgroundColor":"rgba(23, 124, 176, 1)","color":"#fff","borderRadius":"6px","borderWidth":"0","width":"25%","fontSize":"16px","borderStyle":"solid","height":"50px"}'
							class="layui-btn btn-submit" lay-submit lay-filter="*">提交</button>
						<button
							:style='{"padding":"0 10px","boxShadow":"6px 5px 6px #c2ccd0","margin":"0 10px","borderColor":"#ccc","backgroundColor":"rgba(214, 236, 240, 1)","color":"rgba(219, 90, 107, 1)","borderRadius":"6px","borderWidth":"0","width":"25%","fontSize":"16px","borderStyle":"solid","height":"50px"}'
							type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>
		</div>
	</div>

	<script src="../../layui/layui.js"></script>
	<script src="../../js/vue.js"></script>
	<!-- 组件配置信息 -->
	<script src="../../js/config.js"></script>
	<!-- 扩展插件配置信息 -->
	<script src="../../modules/config.js"></script>
	<!-- 工具方法 -->
	<script src="../../js/utils.js"></script>
	<!-- 校验格式工具类 -->
	<script src="../../js/validate.js"></script>
	<!-- 地图 -->
	<script type="text/javascript" src="../../js/jquery.js"></script>
	<script type="text/javascript"
		src="http://webapi.amap.com/maps?v=1.3&key=ca04cee7ac952691aa67a131e6f0cee0"></script>
	<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../../js/bootstrap.AMapPositionPicker.js"></script>

	<script>
		var jquery = $;

		var vue = new Vue({
			el: '#app',
			data: {
				// 轮播图
				swiperList: [{
					img: '../../img/banner.jpg'
				}],
				dataList: [],
				baseurl: '',
				ro: {
					dianzhuangbianhao: false,
					dianzhuangleibie: false,
					tupian: false,
					shurudianya: false,
					shuchugonglv: false,
					shiyongfangshi: false,
					zhuyishixiang: false,
					suochuweizhi: false,
					meishidanjia: false,
				},
				detail: {
					dianzhuangbianhao: '',
					dianzhuangleibie: '',
					tupian: '',
					shurudianya: '',
					shuchugonglv: '',
					shiyongfangshi: '',
					zhuyishixiang: '',
					suochuweizhi: '',
					meishidanjia: '',
				},
				dianzhuangleibie: [],
				centerMenu: centerMenu
			},
			updated: function () {
				layui.form.render('select', 'myForm');
			},
			computed: {
			},
			methods: {
				jump(url) {
					jump(url)
				}
			}
		})


		layui.use(['layer', 'element', 'carousel', 'http', 'jquery', 'form', 'upload', 'laydate', 'tinymce'], function () {
			var layer = layui.layer;
			var element = layui.element;
			var carousel = layui.carousel;
			var http = layui.http;

			var jquery = layui.jquery;
			var form = layui.form;
			var upload = layui.upload;
			var laydate = layui.laydate;
			var tinymce = layui.tinymce;
			vue.baseurl = http.baseurl;

			// 获取轮播图 数据
			http.request('config/list', 'get', {
				page: 1,
				limit: 5
			}, function (res) {
				if (res.data.list.length > 0) {
					var swiperItemHtml = '';
					for (let item of res.data.list) {
						if (item.name.indexOf('picture') >= 0 && item.value && item.value != "" && item.value != null) {
							swiperItemHtml +=
								'<div>' +
								'<img style="width: 100%;height: 100%;object-fit:cover;" class="swiper-item" src="' + http.baseurl + item.value + '">' +
								'</div>';
						}
					}
					jquery('#swiper-item').html(swiperItemHtml);
					// 轮播图
					vue.$nextTick(() => {
						carousel.render({
							elem: '#swiper',
							width: '100%',
							height: '600px',
							arrow: 'hover',
							anim: 'default',
							autoplay: 'true',
							interval: '3000',
							indicator: 'inside'
						});

					})
					// carousel.render({
					// 	elem: '#swiper',
					// 	width: swiper.width,height:swiper.height,
					// 	arrow: swiper.arrow,
					// 	anim: swiper.anim,
					// 	interval: swiper.interval,
					// 	indicator: "none"
					// });
				}
			});

			http.request(`option/dianzhuangleibie/dianzhuangleibie`, 'get', {}, (res) => {
				vue.dianzhuangleibie = res.data
			});
			// 上传图片
			var tupianUpload = upload.render({
				//绑定元素
				elem: '#tupianUpload',
				//上传接口
				url: http.baseurl + 'file/upload',
				// 请求头
				headers: {
					Token: localStorage.getItem('Token')
				},
				// 允许上传时校验的文件类型
				accept: 'images',
				before: function () {
					//loading层
					var index = layer.load(1, {
						shade: [0.1, '#fff'] //0.1透明度的白色背景
					});
				},
				// 上传成功
				done: function (res) {
					console.log(res);
					layer.closeAll();
					if (res.code == 0) {
						layer.msg("上传成功", {
							time: 2000,
							icon: 6
						})
						var url = 'upload/' + res.file;
						jquery('#tupian').val(url);
						jquery('#tupianImg').attr('src', url)
						vue.detail.tupian = url;
					} else {
						layer.msg(res.msg, {
							time: 2000,
							icon: 5
						})
					}
				},
				//请求异常回调
				error: function () {
					layer.closeAll();
					layer.msg("请求接口异常", {
						time: 2000,
						icon: 5
					})
				}
			});
			var edit = tinymce.render({
				elem: "#zhuyishixiang",
				height: 600,
				images_upload_handler: function (blobInfo, succFun, failFun) {
					var xhr, formData;
					var file = blobInfo.blob(); //转化为易于理解的file对象
					xhr = new XMLHttpRequest();
					xhr.withCredentials = false;
					xhr.open('POST', http.baseurl + 'file/upload');
					xhr.setRequestHeader("Token", localStorage.getItem('Token')); //设置请求头
					xhr.onload = function () {
						var json;
						if (xhr.status != 200) {
							failFun('HTTP Error: ' + xhr.status);
							return;
						}
						json = JSON.parse(xhr.responseText);
						if (!json || typeof json.file != 'string') {
							failFun('Invalid JSON: ' + xhr.responseText);
							return;
						}
						succFun(http.baseurl + 'upload/' + json.file);
					};
					formData = new FormData();
					formData.append('file', file, file.name); //此处与源文档不一样
					xhr.send(formData);
				}
			}, (opt) => {

			});

			// session独取
			let table = localStorage.getItem("userTable");
			http.request(`${table}/session`, 'get', {}, function (data) {
				// 表单赋值
				//form.val("myForm", data.data);
				data = data.data
				for (var key in data) {
				}
			});

			// 跨表
			if (http.getParam('corss')) {
				var obj = JSON.parse(localStorage.getItem('crossObj'));
				for (var o in obj) {
					if (o == 'dianzhuangbianhao') {
						vue.detail[o] = obj[o];
						vue.ro.dianzhuangbianhao = true;
						continue;
					}
					if (o == 'dianzhuangleibie') {
						vue.detail[o] = obj[o];
						vue.ro.dianzhuangleibie = true;
						continue;
					}
					if (o == 'tupian') {
						vue.detail[o] = obj[o];
						vue.ro.tupian = true;
						continue;
					}
					if (o == 'shurudianya') {
						vue.detail[o] = obj[o];
						vue.ro.shurudianya = true;
						continue;
					}
					if (o == 'shuchugonglv') {
						vue.detail[o] = obj[o];
						vue.ro.shuchugonglv = true;
						continue;
					}
					if (o == 'shiyongfangshi') {
						vue.detail[o] = obj[o];
						vue.ro.shiyongfangshi = true;
						continue;
					}
					if (o == 'zhuyishixiang') {
						vue.detail[o] = obj[o];
						vue.ro.zhuyishixiang = true;
						continue;
					}
					if (o == 'suochuweizhi') {
						vue.detail[o] = obj[o];
						vue.ro.suochuweizhi = true;
						continue;
					}
					if (o == 'meishidanjia') {
						vue.detail[o] = obj[o];
						vue.ro.meishidanjia = true;
						continue;
					}
				}
			}


			// 提交
			form.on('submit(*)', function (data) {
				data = data.field;
				// 数据校验
				var zhuyishixiang = tinymce.get('#zhuyishixiang').getContent()
				data.zhuyishixiang = zhuyishixiang;
				if (!isNumber(data.meishidanjia)) {
					layer.msg('每时单价应输入数字', {
						time: 2000,
						icon: 5
					});
					return false
				}

				// 跨表计算判断

				// 比较大小

				//更新跨表属性
				var crossuserid;
				var crossrefid;
				var crossoptnum;
				if (http.getParam('corss')) {
					var statusColumnName = localStorage.getItem('statusColumnName');
					var statusColumnValue = localStorage.getItem('statusColumnValue');
					if (statusColumnName != '') {
						var obj = JSON.parse(localStorage.getItem('crossObj'));
						if (!statusColumnName.startsWith("[")) {
							for (var o in obj) {
								if (o == statusColumnName) {
									obj[o] = statusColumnValue;
								}
							}
							var table = localStorage.getItem('crossTable');
							http.requestJson(`${table}/update`, 'post', obj, (res) => { });
						} else {
							crossuserid = Number(localStorage.getItem('userid'));
							crossrefid = obj['id'];
							crossoptnum = localStorage.getItem('statusColumnName');
							crossoptnum = crossoptnum.replace(/\[/, "").replace(/\]/, "");
						}
					}
				}
				if (crossrefid && crossuserid) {
					data.crossuserid = crossuserid;
					data.crossrefid = crossrefid;
					http.request('chongdianzhuang/list', 'get', {
						page: 1,
						limit: 10,
						crossuserid: crossuserid,
						crossrefid: crossrefid,
					}, function (res) {
						if (res.data.total >= crossoptnum) {
							layer.msg(localStorage.getItem('tips'), {
								time: 2000,
								icon: 6
							})
							return false;
						} else {
							// 跨表计算



							// 提交数据
							http.requestJson('chongdianzhuang' + '/add', 'post', data, function (res) {
								layer.msg('提交成功', {
									time: 2000,
									icon: 6
								}, function () {
									back();
								});
							});
						}
					});
				} else {
					// 跨表计算
					// 提交数据
					http.requestJson('chongdianzhuang' + '/add', 'post', data, function (res) {
						layer.msg('提交成功', {
							time: 2000,
							icon: 6
						}, function () {
							back();
						});
					});
				}

				return false
			});

		});
	</script>
</body>

</html>
